<template>
    <ul class="recommend-list">
        <li v-if="showFirstCard">
            <a href="/discover/recommend/taste" title="每日歌曲推荐" class="date u-date f-alpha">
                <span class="head">{{ weekDay }}</span>
                <span class="bd">{{ day }}</span>
                <span class="mask f-alpha" title="每日歌曲推荐"></span>
            </a>
            <p class="u-dec">
                <a class="tit s-fc0" title="每日歌曲推荐" href="/discover/recommend/taste">每日歌曲推荐</a>
            </p>
            <p class="idv s-fc4" title="根据你的口味生成，每天6:00更新">根据你的口味生成，<br>每天6:00更新</p>
        </li>
        <li v-for="item in limitedList" :key="item.id">
            <div class="cover">
                <img :src="item.picUrl" :alt="item.name" />
                <span class="msk" :title="item.name"></span>
                <div class="bottom">
                    <span class="play" title="播放"></span>
                    <span class="headset"></span>
                    <span class="nb">{{ formatPlayCount(item.playCount) }}</span>
                </div>
            </div>
            <p class="dec">
                <span class="tit" :title="item.name">
                    <i v-if="item.hasIcon" class="icon"></i>
                    {{ item.name }}
                </span>
            </p>
        </li>
    </ul>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 使用 withDefaults 给 defineProps 定义默认值，并声明 props 类型
const props = withDefaults(defineProps<{
    /**
     * 推荐列表数据
     * 每一项是一个包含歌曲或歌单信息的对象：
     * - id: 唯一标识
     * - name: 名称
     * - picUrl: 封面图片地址
     * - playCount: 播放量
     * - hasIcon: 是否显示小图标（可选）
     */
    list: Array<{
        id: number
        name: string
        picUrl: string
        playCount: number
        hasIcon?: boolean
    }>

    /**
     * 是否显示“每日歌曲推荐”卡片（页面最前面的那一项）
     * 默认值为 false，即不显示
     */
    showFirstCard?: boolean

    /**
     * 显示的推荐卡片最大数量（不包括每日推荐卡片）
     * 默认值为 8
     */
    limit?: number
}>(), {
    showFirstCard: false, // 默认不显示每日推荐卡片
    limit: Infinity       // 默认不限制展示数量
})

/**
 * 将播放量格式化为“万”或“亿”的形式
 * @param count 播放量数字
 * @returns 格式化后的字符串
 */
function formatPlayCount(count: number): string {
    if (count >= 100000000) return (count / 100000000).toFixed(1) + '亿'
    if (count >= 10000) return (count / 10000).toFixed(1) + '万'
    return count.toString()
}

/**
 * 当前星期几的文本表示（如“星期一”）
 */
const weekdayText = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const today = new Date()
const weekDay = weekdayText[today.getDay()] // 获取今天是星期几
const day = today.getDate()                 // 获取今天是几号

/**
 * 限制展示数量的推荐列表（不包含每日推荐）
 * 只截取前 limit 项
 */
const limitedList = computed(() => props.list.slice(0, props.limit))
</script>

<style scoped lang="scss">
.recommend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; // 控制每个卡片之间的间距
    margin-top: 20px;
    padding-left: 10px; // 避免太靠左

    // 个性化推荐样式
    .u-date {
        position: relative;
        zoom: 1;
        display: block;
        width: 140px;
        height: 140px;
        background-position: 0 0;
        background: url(../assets/Home/Recommend/date.png) no-repeat;

        .head {
            display: block;
            height: 33px;
            line-height: 33px;
            color: #fed9d9;
            font-size: 14px;
            text-shadow: 0 -1px #962626;
            text-align: center;
        }

        .bd {
            display: block;
            line-height: 102px;
            text-align: center;
            font-size: 94px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            color: #202020;
        }

        .mask {
            position: absolute;
            top: 33px;
            left: 0;
            width: 142px;
            height: 107px;
            background-position: 0 -150px !important;
            background: url(../assets/Home/Recommend/date.png) no-repeat;
        }
    }

    .u-dec {
        margin: 8px 0 3px;
        font-size: 14px;

        .tit {
            height: auto;
            display: inline-block;
            max-width: 100%;
            vertical-align: middle;
            max-height: 36px;
            overflow: hidden;
        }
    }

    .idv {
        width: 100%;
        margin-top: 3px;
        position: relative;
        z-index: 2;
    }

    li {
        width: 140px;
        height: 204px;
        line-height: 1.4;
        margin: 5px 7px;

        .cover {
            width: 140px;
            height: 140px;
            position: relative;
            display: block;
            cursor: pointer;

            img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .msk {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-position: 0 0;
                background: url(../assets/Home/Recommend/coverall.png) no-repeat;
            }

            .bottom {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 27px;
                background-position: 0 -537px !important;
                color: #ccc;
                background: url(../assets/Home/Recommend/coverall.png) no-repeat;
                display: flex;
                align-items: center;

                .play {
                    position: absolute;
                    right: 10px;
                    bottom: 5px;
                    width: 16px;
                    height: 17px;
                    background-position: 0 0;
                    background: url(../assets/Home/Recommend/iconall.png) no-repeat;

                    &:hover {
                        background-position: 0 -60px !important;
                    }
                }

                .headset {
                    width: 14px;
                    height: 11px;
                    background-position: 0 -24px !important;
                    margin: 9px 5px 9px 10px;
                    background: url(../assets/Home/Recommend/iconall.png) no-repeat;
                }

                .nb {
                    margin: 3px 0 0 0;
                }
            }
        }

        .dec {
            margin: 8px 0 3px;
            font-size: 14px;
            width: 100%;

            .tit {
                display: inline-block;
                max-width: 100%;
                vertical-align: middle;
                cursor: pointer;

                .icon {
                    position: relative;
                    top: -1px;
                    margin-right: 3px;
                    vertical-align: middle;
                    margin-top: -1px;
                    width: 35px;
                    height: 15px;
                    display: inline-block;
                    overflow: hidden;
                    background-position: -31px -658px !important;
                    background: url(../assets/Home/Recommend/icon.png) no-repeat;
                }

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>
